<template>
    <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-vector" />
        </span>
        <div class="d-flex">
            <span class="fs-xl text mx-2"></span>
        </div>

    </div>
    <div class="centerRight1" style="display:flex">
        <div
                class="HelloWorld echart-box"
                id="mypieChart1"
                :style="{width: '400px', height: '300px'}"
        ></div>
        <div
                class="HelloWorld echart-box"
                id="mypieChart2"
                :style="{width: '400px', height: '290px'}"
        ></div>
        <div
                class="HelloWorld echart-box"
                id="mypieChart3"
                :style="{width: '400px', height: '300px'}"
        ></div>
        <!--    <div>{{list[0].value}}</div>-->
    </div>
</template>

<script>
    import axios from 'axios'
    import * as echarts from 'echarts'
    import {parkSum} from "@/api/api";
    export default {
        data() {
            return {
                // 定义图表，各种参数
                msg: "饼图",
                datas:[],
                datas1:[],
                datas2:[],
                list: [
                    {
                        name: "",
                        value: "",
                    }]
            }
        },
        mounted() {
            axios.get(this.$route.params.url+'dataView/revenue/revenueStatisticsRatio').then(res=>{
                this.datas = res.data;
                this.datas = this.datas.map(item => ({
                    name: item.type,
                    value: item.value
                }))
                this.drawLine1(); //按照默认值绘制图表
            }).catch(function (res) {
                //console.log(res);
            });
            axios.get(this.$route.params.url+'dataView/pay/type').then(res=>{
                this.datas1 = res.data;
                this.datas1 = this.datas1.map(item => ({
                    name: item.type,
                    value: item.value
                }))
                this.drawLine2(); //按照默认值绘制图表
            }).catch(function (res) {
                console.log(res);
            });
            axios.get(this.$route.params.url+'dataView/device/failure').then(res=>{
                this.datas2 = res.data;
                this.datas2 = this.datas2.map(item => ({
                    name: item.x,
                    value: item.y
                }))
                this.drawLine3(); //按照默认值绘制图表
            }).catch(function (res) {
                console.log(res);
            });
            axios.get(this.$route.params.url+'dataView/device/all').then(res=>{
                this.list=res.data
                this.drawLine3(); //按照默认值绘制图表
            }).catch(function (res) {
                console.log(res);
            });
        },
        methods: {
            drawLine1() {
                // 1、基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById("mypieChart1"));
                //console.log("methods:"+this.arr);
                //2、构造图表数据
                let optionpie = {
                    //标题
                    title: {
                        text: '营收总占比',
                        x: 'center' ,              //标题位置
                        textStyle: { //标题内容的样式
                            color: '#F0FFFF',
                            fontStyle: 'normal',
                            fontWeight: 10,
                            fontSize: 16 //主题文字字体大小，默认为18px
                        },
                    },
                    // stillShowZeroSum: true,
                    //鼠标划过时饼状图上显示的数据
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:{c} ({d}%)'
                    },
                    //图例
                    legend: {//图例  标注各种颜色代表的模块
                        // orient: 'vertical',//图例的显示方式  默认横向显示
                        bottom: 3,//控制图例出现的距离  默认左上角
                        left: 'center',//控制图例的位置
                        itemWidth: 14,//图例颜色块的宽度和高度
                        itemHeight: 10,
                        textStyle: {//图例中文字的样式
                            color: '#F0FFFF',
                            fontSize: 12
                        },
                        data: this.datas.value//图例上显示的饼图各模块上的名字
                    },
                    //饼图中各模块的颜色
                    color: ['#32dadd','#FF9393','#1869A0'],
                    // 饼图数据
                    series: {
                        // name: 'bug分布',
                        type: 'pie',             //echarts图的类型   pie代表饼图
                        radius: '60%',           //饼图中饼状部分的大小所占整个父元素的百分比
                        center: ['50%', '40%'],  //整个饼图在整个父元素中的位置
                        data:this.datas,             //饼图数据
                        // data: [                  //每个模块的名字和值
                        //   { name: this.types[0], value: this.values[0] },
                        //   { name: this.types[1], value: this.values[1]},
                        //   { name: this.types[2], value: this.values[2]}
                        // ],
                        itemStyle: {
                            normal: {
                                label: {
                                    position : 'inner',
                                    show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                                    // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                },
                                labelLine: {
                                    show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                                }
                            }
                        },
                    }

                }
                // 3、绘制图表
                myChart.setOption(optionpie);
            },
            drawLine2(){
                // 1、基于准备好的dom，初始化echarts实例
                let myChart2 = echarts.init(document.getElementById("mypieChart2"));
                //console.log("methods:"+this.arr);
                //2、构造图表数据
                let optionpie2 = {
                    //标题
                    title: {
                        text: '支付类型统计',
                        x: 'left' ,              //标题位置
                        textStyle: { //标题内容的样式
                            color: '#F0FFFF',
                            fontStyle: 'normal',
                            fontWeight: 100,
                            fontSize: 16 //主题文字字体大小，默认为18px
                        },
                    },
                    // stillShowZeroSum: true,
                    //鼠标划过时饼状图上显示的数据
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:{c} ({d}%)'
                    },
                    //图例
                    legend: {//图例  标注各种颜色代表的模块
                        // orient: 'vertical',//图例的显示方式  默认横向显示
                        bottom: 4,//控制图例出现的距离  默认左上角
                        left: 'center',//控制图例的位置
                        itemWidth: 14,//图例颜色块的宽度和高度
                        itemHeight: 10,
                        textStyle: {//图例中文字的样式
                            color: '#F0FFFF',
                            fontSize: 12
                        },

                        data: this.datas1.value//图例上显示的饼图各模块上的名字
                    },
                    //饼图中各模块的颜色
                    color: ["#45C2E0", "#C1EBDD", "#FFC851","#5A5476"],
                    // 饼图数据
                    series: {
                        // name: 'bug分布',
                        type: 'pie',             //echarts图的类型   pie代表饼图
                        radius: '60%',           //饼图中饼状部分的大小所占整个父元素的百分比
                        center: ['50%', '45%'],  //整个饼图在整个父元素中的位置
                        data:this.datas1,           //饼图数据
                        // data: [                  //每个模块的名字和值
                        // data: [                  //每个模块的名字和值
                        //   { name: this.data1[0], value: this.data2[0] },
                        //   { name: this.data1[1], value: this.data2[1]},
                        //   { name: this.data1[2], value: this.data2[2]},
                        //   { name: this.data1[3], value: this.data2[3]}
                        // ],
                        itemStyle: {
                            normal: {
                                label: {

                                    show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                                    // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                },
                                labelLine: {
                                    show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                                }
                            }
                        },
                    }

                }
                // 3、绘制图表
                myChart2.setOption(optionpie2);
            },
            drawLine3(){
                // 1、基于准备好的dom，初始化echarts实例
                let myChart3 = echarts.init(document.getElementById("mypieChart3"));
                //console.log("methods:"+this.arr);
                //2、构造图表数据
                let optionpie3 = {
                    //标题
                    title: {
                        text: '设备总数',
                        x: 'left' ,              //标题位置
                        textStyle: { //标题内容的样式
                            color: '#F0FFFF',
                            fontStyle: 'normal',
                            fontWeight: 100,
                            fontSize: 16 //主题文字字体大小，默认为18px
                        },
                    },
                    stillShowZeroSum: true,
                    //鼠标划过时饼状图上显示的数据
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:{c} ({d}%)'
                    },
                    //图例
                    legend: {//图例  标注各种颜色代表的模块
                        // orient: 'vertical',//图例的显示方式  默认横向显示
                        bottom: 5,//控制图例出现的距离  默认左上角
                        // bottom: 'center',//控制图例的位置
                        itemWidth: 14,//图例颜色块的宽度和高度
                        itemHeight: 10,
                        textStyle: {//图例中文字的样式
                            color: '#F0FFFF',
                            fontSize: 10
                        },

                        data: this.datas2.x//图例上显示的饼图各模块上的名字
                    },

                    //饼图中各模块的颜色
                    color: ['#32dadd', '#b6a2de', '#5ab1ef'],
                    // 饼图数据
                    series: {
                        // name: 'bug分布',
                        type: 'pie',             //echarts图的类型   pie代表饼图
                        radius: '60%',           //饼图中饼状部分的大小所占整个父元素的百分比
                        center: ['50%', '40%'],  //整个饼图在整个父元素中的位置
                        data:this.datas2,               //饼图数据
                        // data: [                  //每个模块的名字和值
                        //   { name: this.sevice2[0], value: this.sevice1[0]},
                        //   { name: this.sevice2[1], value: this.sevice1[1]},
                        // ],
                        itemStyle: {
                            normal: {
                                label: {
                                    position : 'inner',
                                    show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                                    // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                },
                                labelLine: {
                                    show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                                }
                            }
                        },
                    }

                }
                // 3、绘制图表
                myChart3.setOption(optionpie3);
            }
        },
    };
</script>
<style lang="scss" scoped>
  #centerRight1 {
    padding: 0.0625rem;
    height: 2rem;
    min-width: 1.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
      padding: 0.0625rem;
      height: 2.0625rem;
      width: 2rem;
      border-radius: 0.125rem;
    }}
  #mychart1{
    margin-right: .5rem;
    background-color: azure;
  }
</style>


